{# Stalker Pyramid a Web Base Production Asset Management System
 Copyright (C) 2009-2014 Erkan Ozgur Yilmaz
 
 This file is part of Stalker Pyramid.
 
 This library is free software; you can redistribute it and/or
 modify it under the terms of the GNU Lesser General Public
 License as published by the Free Software Foundation;
 version 2.1 of the License.

 This library is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 Lesser General Public License for more details.

 You should have received a copy of the GNU Lesser General Public
 License along with this library; if not, write to the Free Software
 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
#}
<div class='dijitDialogPaneContentArea' style='height: 380px'>
    <form id='structure_form'>
        <table style='width: 100%'>

            {# Name #}
            <tr>
                <td class='label_column'>
                    <label for='structure_name'>
                        Name
                    </label>
                </td>
                <td class='input_column'>
                    <input id='structure_name'>
                </td>
            </tr>

            {# Custom Template #}
            <tr style='height: 260px'>
                <td class='label_column'>
                    <label for='structure_custom_template'>
                        Custom Template
                    </label>
                </td>
                <td class='input_column'>
                    <input id='structure_custom_template'>
                </td>
            </tr>

            {# Filename Templates #}
            <tr>
                <td class='label_column'>
                    <label for='structure_filename_template'>
                        Filename Templates
                    </label>
                </td>
                <td class='input_column'>
                    <select id='structure_filename_template'>
                    </select>
                </td>
                <td class='button_column'>
                    <button id='structure_create_filename_template_button'>
                        Submit
                    </button>
                    {#        <button id='structure_update_filename_template_button'>Update</button>#}
                </td>
            </tr>
        </table>
    </form>
</div>

<div class='dijitDialogPaneActionBar'>
    <button id='structure_submit_button'></button>
    <button id='structure_cancel_button'></button>
</div>

<script type='text/javascript'>
    require([
        'dojo/store/JsonRest',
        'dijit/form/Form',
        'dijit/form/ValidationTextBox',
        'dijit/form/SimpleTextarea',
        'dijit/form/Button',
        'dijit/form/MultiSelect',
        'stalker/js/dialogs',
        'stalker/js/submitForm',
        'stalker/js/fieldUpdater',
        'stalker/js/dialogCaller',
        'dojo/domReady!'
    ], function (JsonRest, Form, ValidationTextBox, SimpleTextarea, Button,
                 MultiSelect, dialogs, submitForm, fieldUpdater,
                 dialogCaller) {

        // ********************************************************************
        // Generate default values
        var url;
        var name;
        var custom_template;
        var ft_ids = [];
        var additional_data = {};

        {% if mode=='CREATE' %}
            url = '{{ request.route_url('create_structure') }}';
        {% elif mode=='UPDATE' %}
            url = '{{ request.route_url('update_structure', id=structure.id) }}';
            name = '{{ structure.name }}';
            custom_template = '{{ structure.custom_template }}';
            ft_ids = [
                {% for ft in structure.templates %}
                    {{ ft.id }},
                {% endfor %}
            ];
            console.debug(ft_ids);
            additional_data = {
{#                structure_id: {{ structure.id }}#}
            };
        {% endif %}

        // ********************************************************************
        // Form
        var structure_form = new Form({}, 'structure_form');
        structure_form.startup();

        var dialog = structure_form.getParent();


        // ********************************************************************
        // Name
        var name_textBox = new ValidationTextBox({
            name: 'name',
            label: 'Name',
            placeHolder: 'Enter a name',
            required: true,
            value: name
        }, 'structure_name');
        name_textBox.startup();


        // ********************************************************************
        // Custom Template
        var custom_template_simpleTextarea = new SimpleTextarea({
            name: 'custom_template',
            label: 'Custom Template',
            placeHolder: 'Enter any custom template here',
            required: false,
            style: 'height: 250px; overflow:auto',
            value: custom_template
        }, 'structure_custom_template');
        custom_template_simpleTextarea.startup();


        // ********************************************************************
        // Filename Template
        var filename_template_memory = new JsonRest({
            target: '{{ request.route_url('get_filename_templates') }}'
        });

        // The Widget
        var filename_template_multi_select = new MultiSelect({
            name: 'filename_templates',
            required: false,
            style: 'min-width: 200px;'
        }, 'structure_filename_template');
        filename_template_multi_select.startup();

        // The Updater
        var filename_template_field_updater = fieldUpdater({
            'memory': filename_template_memory,
            'widget': filename_template_multi_select,
            'selected': ft_ids
        });
        // run the function to fill the data for the first time
        filename_template_field_updater({animate: false});

        // New Filename Template Button
        var create_filename_template_button = dialogCaller({
            label: 'New',
            dialog_id: 'filename_template_dialog',
            content_creator: dialogs.create_filename_template_dialog,
            attach_to: 'structure_create_filename_template_button',
            related_field_updater: filename_template_field_updater
        });
        create_filename_template_button.startup();


        // ********************************************************************
        // Ok Button
        var ok_button = new Button({
            label: 'OK',
            type: 'button',
            onClick: function () {
                submitForm({
                    dialog: dialog,
                    form: structure_form,
                    additional_data: additional_data,
                    url: url,
                    method: 'POST'
                });
            }
        }, 'structure_submit_button');
        ok_button.startup();


        // ********************************************************************
        // Cancel Button
        var cancel_button = new Button({
            label: 'Cancel',
            type: 'button',
            onClick: function () {
                dialog.destroyRecursive();
            }
        }, 'structure_cancel_button');
        cancel_button.startup();


    });
</script>

